<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>用户登录</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/base.css" rel="stylesheet" />
		<link href="css/common.css" rel="stylesheet" />
		<link href="css/app.css" rel="stylesheet" />
		<style>
			body {
				background-color: #fff;
			}
			
			.header {
				box-shadow: none;
				border-bottom: 1px solid #f5f5f5;
			}
			.loginMain{margin: 0 20px 10px 20px;}
		</style>
	</head>

	<body>
		<div class="bodyWrap" id="vApp">
			<!--header-->
			<div class="mui-bar mui-bar-nav header" style="background-color: #fff;">
				<div class="mui-row">
					<div class="mui-col-xs-12 pr">
						<h1 class="header_title">用户登录</h1>
						<a href="index.html" style="color: #e92e0f;">
							<span v-on:click="back()" class="mui-icon mui-icon mui-icon-back"></span>
						</a>
					</div>
				</div>
			</div>
			<ul class="mui-row loginTab tc fb f15">
				<li class="mui-col-xs-6 active">
					手机号快捷登录<img src="images/logingTop.png" />
				</li>
				<li class="mui-col-xs-6">账号密码登录<img src="images/logingTop.png" /></li>
			</ul>
			<!--loginMain-->
			<ul class="loginMain">
				<!--手机号登录-->
				<li class="active">
					<div class="mui-row">
						<div class="mui-col-xs-12">
							<input type="text" placeholder="请输入手机号" />
						</div>
					</div>
					<div class="mui-row">
						<div class="mui-col-xs-8">
							<input type="text" placeholder="请输入右侧的验证码" />
						</div>
						<div class="mui-col-xs-4 tc">
							<img src="images/code.jpg" alt="" />
						</div>
					</div>
					<div class="mui-row">
						<div class="mui-col-xs-8">
							<input type="text" placeholder="请输入短息验证码" />
						</div>
						<div class="mui-col-xs-4 tc">
							<span class="redBtnEmpty">发送验证码</span>
						</div>
					</div>
				</li>
				<!--昵称登录-->
				<li class="nickLogin">
					<div class="mui-row">
						<div class="mui-col-xs-12">
							<input class="phone" type="text" placeholder="手机号或昵称" />
						</div>
					</div>
					<div class="mui-row">
						<div class="mui-col-xs-12">
							<input class="pass" type="text" placeholder="请输入密码" />
						</div>
					</div>
				</li>
			</ul>
			<div class="pl10 pr10 mb10">
				<span  v-on:click="loginTap()" class="redBtnBig">登录</span>
			</div>
			<p class="tr f12 mb10 pr10">
				<a href="findpass.html">忘记密码?</a>
			</p>
		</div>
		<script src="js/zepto.min.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/mui.min.js"></script>

		<script src="js/app.js"></script>
		<script type="text/javascript">
			var vApp = new Vue({
				el: "#vApp",
				data:{
					kk:"45",
				},
				methods:{
					loginTap:function(){
						window.location.href="my.html";
					},
					back:function(){
						history.go(-1);
					},
					loginTab:function(){
						$(".loginTab li").click(function(){
						$(this).addClass("active").siblings().removeClass("active");
						var index=$(".loginTab li").index($(this));
						$(".loginMain li").removeClass("active");
						$(".loginMain li").eq(index).addClass("active");
					})
					}
				}
			})
			vApp.loginTab();
		</script>
	</body>

</html>